<template>
    <div id="app">
      <div>
        <span>姓名:</span>
        <input type="text" v-model="name" />
      </div>
      <div>
        <span>年龄:</span>
        <input type="number" v-model="age" />
      </div>
      <div>
        <span>性别:</span>
        <select v-model="gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click="add(arr)">添加/修改</button>
      </div>
      <div>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tbody v-if="arr.length">
            <tr v-for="(item, index) in arr" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.age }}</td>
              <td>{{ item.gender }}</td>
              <td>
                <button @click="del(index)">删除</button>
                <button @click="change(index)">编辑</button>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'day-04',
    data() {
      return {
        name: '',
        age: '',
        gender: '',
        id: '',
        arr: [
          {
            id: 1,
            name: '萝卜头',
            age: '1.5',
            gender: '男',
          },
          {
            id: 2,
            name: '萝卜妹',
            age: '0.5',
            gender: '女',
          },
          {
            id: 3,
            name: '萝卜妈',
            age: '18',
            gender: '女',
          },
        ],
      }
    },
    methods: {
      add(arr) {
        if (!this.name || !this.age || !this.gender) {
          alert('请输入完整信息')
          return
        }
        // console.log(this.id)
        if (this.id) {
          arr[this.id - 1] = {
            id: this.id,
            name: this.name,
            age: this.age,
            gender: this.gender,
          }
        } else {
          this.arr.push({
            id: this.arr.length + 1,
            name: this.name,
            age: this.age,
            gender: this.gender,
          })
        }
        // console.log(arr)
        this.name = ''
        this.age = ''
        this.gender = ''
        this.id = ''
      },
      del(a) {
        // console.log(a)
        this.arr = this.arr.filter((item, index) => index != a)
      },
      change(b) {
        console.log(b)
        this.name = this.arr[b].name
        this.age = this.arr[b].age
        this.gender = this.arr[b].gender
        this.id = this.arr[b].id
      },
    },
  }
  </script>
  <style>
  input,
  select {
    margin: 10px;
  }
  button {
    margin-bottom: 10px;
  }
  .none {
    margin-left: 90px;
  }
  </style>